<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			body {
				background: url(img/apic17571.jpg);
				overflow: hidden;
			}
			
			.imgdiv {
				position: absolute;
				width: 220px;
				height: 220px;
			}
			
			.imgdiv img {
				position: absolute;
				width: 220px;
				height: 220px;
			}
		</style>
	</head>

	<body>
		<!--<div class="imgdiv" data-rotx="5" data-roty="8" style="top:5px;left: 5px;">
			<img src="../../img/ch0.png" style="opacity: 0.4;">
			<img src="../../img/ch1.png" style="opacity: 0.2;">
			<img src="../../img/ch2.png" style="opacity: 0.3;"></div>
		<div class="imgdiv" data-rotx="4" data-roty="7" style="top:300px;left:300px">
			<img src="../../img/ch0.png" style="opacity: 0.4;">
			<img src="../../img/ch1.png" style="opacity: 0.4;">
			<img src="../../img/ch2.png" style="opacity: 0.2;"></div>-->
		<script>
			function creatImg() {
				for(i = 0; i < 1; i++) {
					var div = document.createElement("div")
					div.className = "imgdiv"
					div.style.top = "5px"
					div.style.left = "5px"
					div.setAttribute("data-rotx", parseInt(Math.random() * 15) + 5)
					div.setAttribute("data-roty", parseInt(Math.random() * 15) + 5)
					for(k = 0; k < 4; k++) {
						var img = document.createElement("img")
						img.src = "img/ch" + k + ".png"
						div.appendChild(img)
					}
					document.body.appendChild(div)
				}
			}
			var imgNum = 0;
			var id = setInterval(function() {
				creatImg();
				imgNum++
				if(imgNum == 3) {
					clearInterval(id)
				}
			}, 1000)
			setInterval(function() {
				moveImg()
			}, 50)

			function moveImg() {
				var divs = document.getElementsByTagName("div")
				var hight = document.documentElement.clientHeight;
				var width = document.documentElement.clientWidth;
				for(var i = 0; i < divs.length; i++) {
					var rotx = parseInt(divs[i].getAttribute("data-rotx"))
					var roty = parseInt(divs[i].getAttribute("data-roty"))
					var top = parseInt(divs[i].style.top)
					var left = parseInt(divs[i].style.left)
					top += roty;
					left += rotx;
					divs[i].style.top = top + "px"
					divs[i].style.left = left + "px"
					if(top > hight - 225) {
						roty = -roty
						imgOpacity(i);
						divs[i].style.top = hight - 225 + "px"
					}
					if(top <= 0) {
						roty = -roty
						imgOpacity(i);
						divs[i].style.top = "0px"
					}
					if(left > width - 225) {
						rotx = -rotx
						imgOpacity(i);
						divs[i].style.left = width - 225 + "px"
					}
					if(left <= 0) {
						rotx = -rotx
						imgOpacity(i);
						divs[i].style.left = "0px"
					}

					divs[i].setAttribute("data-roty", roty)
					divs[i].setAttribute("data-rotx", rotx)

				}
			}

			function imgOpacity(div) {
				var imgs = document.getElementsByTagName("img")
				for(i = 0; i < imgs.length - 1; i++) {
					imgs[i].style.opacity = Math.random();
				}
			}
		</script>
	</body>

</html>